<template>
  <div class="page">
    <div class="navbar">
      <div class="navbar-bg"></div>
      <div class="navbar-inner sliding">
        <div class="left">
          <a href="#" class="link back">
            <i class="icon icon-back"></i>
            <span class="if-not-md">Back</span>
          </a>
        </div>
        <div class="title">Checkbox</div>
      </div>
    </div>
    <div class="page-content">
      <div class="block-title">Inline</div>
      <div class="block block-strong">
        <p>Lorem <label class="checkbox"><input type="checkbox"><i class="icon-checkbox"></i></label> ipsum dolor sit amet, consectetur adipisicing elit. Alias beatae illo nihil aut eius commodi sint eveniet aliquid eligendi <label class="checkbox"><input type="checkbox"><i class="icon-checkbox"></i></label> ad delectus impedit tempore nemo, enim vel praesentium consequatur nulla mollitia!</p>
      </div>
      <div class="block-title">Checkbox Group</div>
      <div class="list">
        <ul>
          <li>
            <label class="item-checkbox item-content">
              <input type="checkbox" name="demo-checkbox" value="Books" checked/>
              <i class="icon icon-checkbox"></i>
              <div class="item-inner">
                <div class="item-title">Books</div>
              </div>
            </label>
          </li>
          <li>
            <label class="item-checkbox item-content">
              <input type="checkbox" name="demo-checkbox" value="Movies"/>
              <i class="icon icon-checkbox"></i>
              <div class="item-inner">
                <div class="item-title">Movies</div>
              </div>
            </label>
          </li>
          <li>
            <label class="item-checkbox item-content">
              <input type="checkbox" name="demo-checkbox" value="Food"/>
              <i class="icon icon-checkbox"></i>
              <div class="item-inner">
                <div class="item-title">Food</div>
              </div>
            </label>
          </li>
          <li>
            <label class="item-checkbox item-content">
              <input type="checkbox" name="demo-checkbox" value="Drinks"/>
              <i class="icon icon-checkbox"></i>
              <div class="item-inner">
                <div class="item-title">Drinks</div>
              </div>
            </label>
          </li>
        </ul>
      </div>

      <div class="block-title">Indeterminate State</div>
      <div class="list">
        <ul>
          <li>
            <label class="item-checkbox item-content">
              <input
                type="checkbox"
                name="demo-checkbox"
                {{#js_if "this.movies.length === 2"}}checked{{/js_if}}
                {{#js_if "this.movies.length === 1"}}indeterminate{{/js_if}}
                @change="onMoviesChange"
              />
              <i class="icon icon-checkbox"></i>
              <div class="item-inner">
                <div class="item-title">Movies</div>
              </div>
            </label>
            <ul>
              <li>
                <label class="item-checkbox item-content">
                  <input
                    type="checkbox"
                    name="demo-checkbox"
                    value="Movie 1"
                    {{#js_if "this.movies.indexOf('Movie 1') >= 0"}}checked{{/js_if}}
                    @change="onMovieChange"
                  />
                  <i class="icon icon-checkbox"></i>
                  <div class="item-inner">
                    <div class="item-title">Movie 1</div>
                  </div>
                </label>
              </li>
              <li>
                <label class="item-checkbox item-content">
                  <input
                    type="checkbox"
                    name="demo-checkbox"
                    value="Movie 2"
                    {{#js_if "this.movies.indexOf('Movie 2') >= 0"}}checked{{/js_if}}
                    @change="onMovieChange"
                  />
                  <i class="icon icon-checkbox"></i>
                  <div class="item-inner">
                    <div class="item-title">Movie 2</div>
                  </div>
                </label>
              </li>
            </ul>
          </li>
        </ul>
      </div>

      <div class="block-title">With Media Lists</div>
      <div class="list media-list">
        <ul>
          <li>
            <label class="item-checkbox item-content">
              <input type="checkbox" name="demo-media-checkbox" value="1"/>
              <i class="icon icon-checkbox"></i>
              <div class="item-inner">
                <div class="item-title-row">
                  <div class="item-title">Facebook</div>
                  <div class="item-after">17:14</div>
                </div>
                <div class="item-subtitle">New messages from John Doe</div>
                <div class="item-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus.</div>
              </div>
            </label>
          </li>
          <li>
            <label class="item-checkbox item-content">
              <input type="checkbox" name="demo-media-checkbox" value="2"/>
              <i class="icon icon-checkbox"></i>
              <div class="item-inner">
                <div class="item-title-row">
                  <div class="item-title">John Doe (via Twitter)</div>
                  <div class="item-after">17:11</div>
                </div>
                <div class="item-subtitle">John Doe (@_johndoe) mentioned you on Twitter!</div>
                <div class="item-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus.</div>
              </div>
            </label>
          </li>
          <li>
            <label class="item-checkbox item-content">
              <input type="checkbox" name="demo-media-checkbox" value="3"/>
              <i class="icon icon-checkbox"></i>
              <div class="item-inner">
                <div class="item-title-row">
                  <div class="item-title">Facebook</div>
                  <div class="item-after">16:48</div>
                </div>
                <div class="item-subtitle">New messages from John Doe</div>
                <div class="item-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus.</div>
              </div>
            </label>
          </li>
          <li>
            <label class="item-checkbox item-content">
              <input type="checkbox" name="demo-media-checkbox" value="4"/>
              <i class="icon icon-checkbox"></i>
              <div class="item-inner">
                <div class="item-title-row">
                  <div class="item-title">John Doe (via Twitter)</div>
                  <div class="item-after">15:32</div>
                </div>
                <div class="item-subtitle">John Doe (@_johndoe) mentioned you on Twitter!</div>
                <div class="item-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus.</div>
              </div>
            </label>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
  return {
    data: function () {
      return {
        movies: ['Movie 1'],
      };
    },
    methods: {
      onMovieChange: function (e) {
        var self = this;
        var value = e.target.value;
        var movies = self.movies;
        if (e.target.checked) {
          movies.push(value);
        } else {
          movies.splice(movies.indexOf(value), 1);
        }
        self.$setState({ movies: movies });
      },
      onMoviesChange: function (e) {
        var self = this;
        var movies = self.movies;
        if (movies.length === 1 || movies.length === 0) {
          movies = ['Movie 1', 'Movie 2'];
        } else if (movies.length === 2) {
          movies = [];
        }
        self.$setState({ movies: movies });
      },
    }
  }
</script>